<template>
  <t-dialog v-if="isDialog" :header="header" :visible.sync="visible" :onClose="closeDialog"     :closeOnOverlayClick="false"
            :confirmBtn="null" width="80%"
            top="5%">

<div style="height: 65vh">
  <t-table
    rowKey="id"
    :data="data"
    :columns="columns"
    hover
    :loading="dataLoading"
  >
    <!--    <template #approveType="{row}">-->
    <!--      {{ row.approveType|filterByDict(dict.type.approve_type) }}-->
    <!--    </template>-->
    <template #approveStatus="{row}">
<!--      <t-tag v-if="row.approveStatus==='3'" theme="success">通过</t-tag>-->
<!--      <t-tag v-else-if="row.approveStatus==='4'" theme="danger">退回</t-tag>-->
<!--      <t-tag v-else theme="warning">待审批</t-tag>-->
      <t-tag v-if="row.approveStatus"
             :theme="handleTheme(row.approveStatus, dict.type.approve_status )" variant="light">
        {{ row.approveStatus | filterByDict(dict.type.approve_status ) }}
      </t-tag>
      <t-tag v-else theme="warning" variant="light">待审批
      </t-tag>
    </template>
  </t-table>
</div>
  </t-dialog>
  <div v-else>
    <t-table
      rowKey="id"
      :data="data"
      :columns="columns"
      hover
      :loading="dataLoading"
    >
      <!--    <template #approveType="{row}">-->
      <!--      {{ row.approveType|filterByDict(dict.type.approve_type) }}-->
      <!--    </template>-->
      <template #approveStatus="{row}">
        <t-tag v-if="row.approveStatus"
               :theme="handleTheme(row.approveStatus, dict.type.approve_status )" variant="light">
          {{ row.approveStatus | filterByDict(dict.type.approve_status ) }}
        </t-tag>
        <t-tag v-else theme="warning" variant="light">待审批
        </t-tag>
      </template>
    </t-table>
  </div>
</template>

<script>
export default {
  name: "approve-list",
  dicts:['approve_type', 'approve_status'],
  props: {
    objId: [String, Number],
    // header: String,
    isDialog: {
      type: Boolean,
      default: true
    },
    header: {
      type: String,
      default: ''
    },
    tabDefaultValue: {
      type: String,
      default: '1'
    }
  },
  data(){
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        approveType: '',
        businessName: '',
      },
      visible: true,
      data: [],
      columns: [
        // {
        //   colKey: "businessId",
        //   title: "业务id",
        //   align: "center"
        // },
        {
          colKey: "businessName",
          title: "业务名称",
          align: "center",
          ellipsis: true
        },
        // {
        //   colKey: "approveType",
        //   title: "审批业务类型",
        //   align: "center",
        //   ellipsis: true
        // },
        {
          colKey: "approverName",
          title: "审批人",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "deptName",
          title: "单位",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "opinion",
          title: "审批意见",
          align: "center",
          width: 300
        },
        {
          colKey: "approveStatus",
          title: "审批结果",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "updateTime",
          title: "审批时间",
          align: "center",
          ellipsis: true
        },
      ],

      dataLoading: false,
    }
  },
  created() {
    this.getList();
  },
  methods:{
    getList() {
      this.dataLoading = true;
      this.$api.wcx.approve.getByBusinessId(this.objId).then(response => {
        this.data = response.data;
        this.dataLoading = false;
        // this.formData.id = this.row.id;
        // this.formData.businessId = this.row.businessId;
        // this.formData.approveType = this.row.approveType;
      }).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
    closeDialog() {
      this.$emit("update:visible", false);
    },
  }
}
</script>

<style scoped>

</style>
